<!-- SearchResult.vue -->
<template>
    <div class="demo-image__lazy">
      <div class="box">
        <h1>名称：<span>{{ name1 }}</span></h1>
        <p>搜索结果：<span>{{ newResult[0]?.photos.length || '暂无搜索结果' }}</span></p>
        <el-image v-for="(url, index) in newResult[0]?.photos || []" :key="index" :src="url" lazy style="margin-bottom: 10px;" />
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { imgs_list } from '../../api/request';
  import api from '../../api/index';
  import { ref, onMounted, defineProps, watch } from 'vue';
  
  interface User {
      name: string;
      num: number;
      photos: string[];
  }
  
  const props = defineProps<{ name1: string }>();
  const tableData = ref<User[]>([]);
  const newResult = ref<User[]>([]);
  
  const photoList = async () => {
      const content = await imgs_list();
      const { code, result } = content;
      if (code === 200) {
          tableData.value = result.map(item => {
              const photos = item.imgurl.split('\n').map(item => item.trim()).filter(Boolean).map(item => api.url + item);
              return {
                  name: item.name,
                  num: photos.length,
                  photos: photos,
              };
          });
      }
  };
  
  onMounted(() => {
      photoList();
  });
  
  watch(() => props.name1, (newName) => {
      if (newName) {
          newResult.value = tableData.value.filter(item => item.name === newName);
      } else {
          newResult.value = []; 
      }
  });
  </script>
  
  <style scoped lang="scss">
  .demo-image__lazy {
      z-index: 444;
      width: 300px;
      height: 400px;
      overflow-y: auto;
      position: relative;
      margin-top: 20px; 
      transform: translate(200%); 
  
      .box {
          padding: 20px;
          background-color: #ccc;
  
          h1 {
              font-size: 16px;
              span {
                  font-size: 13px;
              }
          }
  
          p {
              font-size: 11px;
              margin-top: 10px;
          }
      }
  }
  </style>